<template>
<div id="bkg">
  <el-row class = "top_box">
      <el-col :span="2">
          <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toIndex()"><i class="el-icon-caret-left" />首页</el-button>
          <!-- <router-link style="text-align:left" to="/admin"><el-button type="text" style="font-size:16px">&lt;&lt;首页</el-button></router-link> -->
      </el-col>
      <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;margin-top:5px;text-align:center">
          我的模板
      </el-col>
      <el-col :span="2">
      <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
      </el-col>
  </el-row>
  <el-container style="min-height:1000px">
    <!-- 顶部 -->
    <el-container>
    <!-- 左侧菜单 -->
      <el-aside width="200px"
      style="background-color:rgba(162, 143, 202, 0.3); height:900px;margin-top:20px">
          <leftMenu
          :default-active="this.$router.path"
          @choosePath="choosePath"
          ></leftMenu>
      </el-aside>
      <el-main style="text-align: left;margin-left:50px;margin-top:30px;padding: 100px 0 0 250px">
        <el-table 
            :data="allMyModels"
            border
            height="500"
            style="width: 1420px;font-size:18px;margin-top:43px"
            >
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                      <div v-for="question in props.row.questions" :key="question.index">
                      <el-form-item 
                      label-width="120px"
                      v-if="question.type!='分节符'"
                      :label="'第'+question.no+'题('+question.type+'):'"
                      >
                        <span style="font-size:16px">{{ question.title }}</span>
                        <div 
                        v-for="(option, index2) in question.options"
                        :label="'选项' + index2"
                        :key="option.index"
                        style="color:#99a9bf">
                        {{ option }}
                        </div>
                      </el-form-item>
                      <el-form-item 
                      label-width="80px"
                      v-if="question.type=='分节符'"
                      label="(分节符)"
                      >
                      <span style="font-size:16px">{{question.title}}</span>
                      </el-form-item>
                      </div>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="模板名称"
                    width="221">
                </el-table-column>
                <el-table-column
                    prop="public"
                    label="结果公开"
                    width="175">
                </el-table-column>
                <el-table-column
                    prop="anonymous"
                    label="是否匿名"
                    width="175">
                </el-table-column>
                <el-table-column
                    prop="desc"
                    label="描述"
                    width="340">
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="创建时间"
                    width="220">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="240px">
                    <template slot-scope="scope">
                        <el-button type="success" @click="useModel(scope.row.id)">使用此模板</el-button>
                        <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
import leftMenu from '../components/myComponents/leftMenu'
let allMyModels = []
export default {
  name: 'MyModels',
  components:{
    leftMenu
  },
  data(){
    return{
      allMyModels
    }
  },
  methods:{
    choosePath(key){
        switch (key) {
            case "myReceived":
                this.$router.push({path: '/myReceived'})
                break;
            case "statistics":
                this.$router.push({path: '/statistics'})
                break;
            case "myCreated":
                this.$router.push({path: '/myCreated'})
                break;
            case "myModels":
                break;
            default:
                break;
        }
    },

    toIndex: function () {
        this.$router.push({path: '/admin'})
    },
    useModel: function(id){
      this.$router.push({path: '/useModel', query: {model_id: id}})
    },
    deleteItem: function(item){
        let n = allMyModels.indexOf(item)
        allMyModels.splice(n, 1)
        },
  },

  mounted(){
      this.$http.get('/getModelList').then(res => {
          let temp = res.data.data
          let len = allMyModels.length
          for(let i=len-1;i>=0;i--){
            allMyModels.splice(allMyModels.indexOf(i), 1)
          }
          temp.forEach(element => {
              allMyModels.push(element)
          })
          
          console.log("modelList:")
          console.log(allMyModels)
          return allMyModels
      })
  }
}
</script>


<style>

#bkg {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 60px;
  /* color: #99a9bf; */
}
.demo-table-expand .el-form-item {
  display: block;
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/* 对话框label */
.el-form--inline .el-form-item__label {
  font-weight: 600;
  font-size: 16px;
}
</style>
